<template>
  <div class="home" ref="homeRef">
    <van-nav-bar
      title="购买记录"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    />
    <div class="content">
      <div v-for="i in list" :key="i.id">
        <div class="item">
          <div class="left">
            <span>{{ i.name }}</span>
            <span class="useFunc">{{ i.price }}</span>
          </div>
          <div class="right">
            <div class="mar-rig">
              <span class="gray">订单编号：{{ i.order_no }}</span>
            </div>
            <div>
              <span class="gray">{{ i.createtime.substring(0, 10) }}</span>
            </div>
          </div>
        </div>
      </div>
      <noData :list="list" :lastPage="last_page" :page="page" />
    </div>
  </div>
</template>
<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { belowPayList } from "@/services";
const router = useRouter();
const route = useRoute();
import { onMounted, watch, ref } from "vue";
import noData from "@/components/noData/noData.vue";
import useScroll from "@/hooks/useScroll";

import { computed } from "@vue/reactivity";

const list = ref([]);
const last_page = ref(1);
const page = ref(1);
const start_time = ref(""); //传给后台的参数
const end_time = ref(""); //传给后台的结束时间
onMounted(() => {
  getList();
});
//获取列表
const getList = async () => {
  let res = await belowPayList({
    page: page.value,
    member_id: route.query.id,
  });
  list.value = [...list.value, ...res.data.data];
  last_page.value = res.data.last_page;
};
// 监听滚动到底部
const homeRef = ref();
const { isReachBottom, scrollTop } = useScroll(homeRef);
watch(isReachBottom, (newValue) => {
  if (newValue) {
    if (page.value == last_page.value) {
      return;
    } else {
      page.value++;
      getList();
    }
  }
});
// 返回按钮
const onClickLeft = () => {
  router.back();
};
</script>
<style lang="scss" scoped>
.home {
  background: #f6f6f6;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.content {
  padding: 10px 20px 20px 20px;

  .item {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    border-bottom: 1px solid #dadada;

    .left {
      color: rgba(84, 84, 84, 1);
      font-family: PingFang SC;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;

      .useFunc {
        color: #f66;
        font-family: PingFang SC;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:first-child {
        color: #1d1b20;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      &:last-child {
        // color: #979797;
        color: #1d1b20;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .xyColor {
        color: rgba(44, 185, 164, 1);
      }

      .redColor {
        color: rgba(255, 102, 102, 1);
      }
      .gray {
        color: #979797;
      }
    }

    .mar-rig {
      margin-right: 10px;
    }
  }
}
</style>
